<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<link href="../css/styles.css" rel="stylesheet" type="text/css"></link>
<script src="../js/jquery-latest.js"> </script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function() {

	$("#passengerForm").validate();
	
});
function submitForm(){
	if($("#passengerForm").valid())
		document.passengerForm.submit();
}
function showOrHideDiv(){

	
	if($('input:radio[name=payment]:checked').val() == "debit"){
		$("#divCreditCard").hide();
		$("#divDebitCard").show();
		
		$("#debitCardNumber").addClass("required");
		$("#pin").addClass("required");
		$("#debitExpiry").addClass("required");

		$("#creditCardNumber").removeClass("required");
		$("#creditExpiry").removeClass("required");
		
	}else{
		$("#divDebitCard").hide();
		$("#divCreditCard").show();

		$("#debitCardNumber").removeClass("required");
		$("#pin").removeClass("required");
		$("#debitExpiry").removeClass("required");

		$("#creditCardNumber").addClass("required");
		$("#creditExpiry").addClass("required");
	}
}

function startNewSearch(){
	window.location.href = ".";
}
</script>
<table><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr><td><input type="button" value="Start New Search" onclick="startNewSearch()" style="FONT-SIZE: x-small; FONT-WEIGHT: bold; FONT-FAMILY: 'Verdana';"></input></td></tr></table>
<table style="COLOR: #004040; FONT-WEIGHT: bold; FONT-SIZE: x-small; FONT-FAMILY: 'Verdana'; 
vertical-align: top; border-bottom-style:solid; ; border-bottom-color: gray; 
					border-right-style:solid; ; border-right-color: gray; 
					border-left-style:solid; ; border-left-color: gray; border-top-style:solid; ; border-top-color: gray" align="center">
<thead style="BACKGROUND-COLOR: #fbfe70; font-size: " >
			
			<tr>
				<td>Journey Date</td>
				<td>Flight Number</td>
				<td>Airline</td>
				<td >Boarding Point</td>
				<td >Source</td>
				<td >Intermediate</td>
				<td >Destination</td>
				<td >EAT</td>
				<td >Int EAT</td>
				<td >Int EDT</td>
				
				<td>Fare ($)</td>		
				
			</tr>
		</thead>
			<c:set var="i" value="1"/>
			<c:forEach items="${journeyDetails}" var="item">
				<c:if test="${i % 2 == 0}">
					<c:set value="BACKGROUND-COLOR: #d6d6d6;" var="style"></c:set>
				</c:if>
				<tr style="${style}">
					<c:set value="" var="style"></c:set>
				<td>
					<c:out value="${item.dateOfJourney}" />
				</td>
				<td><c:out value="${item.flight.flightNumber}" /></td>
				<td><c:out value="${item.flight.airlineName}" /></td>
				<td><c:out value="${item.boardingPoint}"></c:out></td>
				<td><c:out value="${item.flight.source}"></c:out></td>
				<td><c:out value="${item.flight.intermediate}" /></td>
				<td><c:out value="${item.flight.destination}" /></td>
				<td><c:out value="${item.flight.timeOfFlight}" /></td>
				
				<td><c:out value="${item.flight.intermediateArrivalTime}"></c:out></td>
				<td><c:out value="${item.flight.intermediateDepartureTime}" /></td>
				
				<td><c:out value="${item.flight.ticketPrice}" /></td>		
				<c:set var="i" value="${i+1}"/>		
			
			</tr>
			</c:forEach>
			<tr>
				<td colspan=10 align="right">Total</td>
				<td ><c:out value="${total}"></c:out></td>
				
			</tr>
		


</table>
<table>
<tr><td>&nbsp;</td></tr>

</table>
<table style="COLOR: #004040; FONT-WEIGHT: bold; FONT-SIZE: x-small; FONT-FAMILY: 'Verdana'; 
vertical-align: top; border-bottom-style:solid; ; border-bottom-color: gray; 
					border-right-style:solid; ; border-right-color: gray; 
					border-left-style:solid; ; border-left-color: gray; border-top-style:solid; ; border-top-color: gray">
<tr>
	<Td colspan=6> Hi <c:out value="${user.lastName}"></c:out>, <c:out value="${user.firstName}"></c:out></Td>
</tr>
<tr>
	<td colspan=6> Please enter passenger details</td>
</tr>
<tr>
	<td colspan=6>
	<form id="passengerForm" name="passengerForm" action="makeReservation.do" method="POST">
	<table style=" width : 719px;">
	<c:forEach var="i" begin="1" end="${numTravelers}" step="1" varStatus ="status">
	<tr style="BACKGROUND-COLOR: #c0c0c0;"><td colspan=6 style="FONT-WEIGHT: bold;">Passenger <c:out value="${i}"></c:out></td></tr>
		<tr>
			<td>First Name: *</td>
			<td><input id="firstName<c:out value='${i}'></c:out>"  name="firstName<c:out value='${i}'></c:out>"  type="text" class="required"></input></td>
		</tr>
		<tr>
			<td>Last Name: *</td>
			<td><input id="lastName<c:out value='${i}'></c:out>" name="lastName<c:out value='${i}'></c:out>" type="text" class="required"></input></td>
		</tr>
		<tr>
			<td>Age: *</td>
			<td><input id="age<c:out value='${i}'></c:out>" name="age<c:out value='${i}'></c:out>" type="text" class="required digits" maxlength="3"></input></td>
		 </tr>
	
	</c:forEach>
	<tr>
		<td colspan=2>How do you like to pay?</td>
	</tr>
	<tr>
		<td colspan=2> 
			<input name="payment" value="debit" type="radio" checked="checked" onclick="showOrHideDiv()">Debit Card</input>
			<input name="payment" value="credit" type="radio" onclick="showOrHideDiv()">Credit Card</input>
		</td>
	</tr>
	<tr>
		<td colspan="6">
		
			<div id="divCreditCard" style="display:none">
				<table>
					<tr>
						<td>Card Number:</td>
						<td><input id="creditCardNumber" type="text"  maxlength=16></input></td>
					</tr>
					<tr>
						<td>Expiry Date:</td>
						<td><input id="creditExpiry" type="text"  maxlength=16 class="required"></input></td>
						
					</tr>
				</table>
			
			</div>
			<div id="divDebitCard" >
				<table>
					<tr>
						<td>Card Number:</td>
						<td><input id="debitCardNumber" type="text" class="required" maxlength=16></input></td>
					</tr>
					<tr>
						<td>Pin: </td>
						<td><input id="pin" type="password" class="required" maxlength=16></input></td>	
					</tr>
					<tr>
						<td>Expiry Date:</td>
						<td><input id="debitExpiry" type="text" class="required" maxlength=16></input></td>
						
					</tr>
				</table>
			
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="6"><input type="button" value="Make a Reservation" onclick="submitForm()" style="FONT-SIZE: x-small; FONT-WEIGHT: bold; FONT-FAMILY: 'Verdana';"></input></td>
	</tr>
	</table>
</form>	
	
	</td>

</tr>
</table>
